<template>
  <div class="ChatPanel">
    <div class="chatPanel--content">
      <c-input v-model:value="content" class="ChatInput" round placeholder="请输入发送的信息" type="textarea" size="small"
        :autosize="{
          minRows: 1,
          maxRows: 6
        }" />
      <c-button :disabled="!content" type='primary' @click="appendMessagge" iconName="SendRound" class="sendButton" />
    </div>
  </div>
</template>

<script setup lang='ts'>
const { appendMessagge, content } = useMessages()
</script>

<style lang="scss">
@media screen and (max-width: 800px) {
  .chatPanel--content {
    bottom: 10px !important;
  }
}

.ChatPanel {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  background: #fff;

  .chatPanel--content {
    position: relative;
    bottom: 30px;
    display: flex;
    justify-content: center;
    width: 100%;

    .ChatInput {
      min-height: 50px;
      border-radius: 12px;
    }

    .n-input-wrapper {
      padding: 10px !important;
    }

    .sendButton {
      position: absolute;
      right: 10px;
      bottom: 8px;
    }
  }

}
</style>